<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shop 界面设计</title>
</head>

<body>
    <link rel="stylesheet" type="text/css" href="index.css">
    <div class="wrap magick_section">

        <!--标题-->
        <h1>
            商城
        </h1>
        <hr />

        <!--展示内容-->
        <section class="magick_section">
            <div class=" switch-tab">
                <label>
                    <input type="radio" name="tab" checked>
                    <span>今日统计</span>
                    <div class="tab-box">
                        <!--今日数据-->


                        111
                        <div class="describe">
                            总销售（已减退款），总订单（已减退款）。
                        </div>

                    </div>
                </label>
                <label>
                    <input type="radio" name="tab">
                    <span>本月统计</span>

                    <div class="tab-box">

                        <!--月度统计-->


                        222




                    </div>
                </label>
                <label>
                    <input type="radio" name="tab">
                    <span>上月统计</span>

                    <div class="tab-box">待开发</div>
                </label>
                <label>
                    <input type="radio" name="tab">
                    <span>年度统计</span>

                    <div class="tab-box">待开发</div>
                </label>
            </div>
        </section>


        <section class="magick_section">
            <h2>今日数据</h2>
            <hr>
            <div class="magick_shop_box">
                <div class="content">
                    <div class="black-data-box-mix">
                        <span>待发货</span>
                        <div class="child">
                            <p><span>
                                    9999
                                </span>个</p>
                            <span class="dashicons dashicons-store"></span>
                        </div>
                    </div>
                </div>
                <div class="content">
                    <div class="black-data-box-mix">
                        <span>今日总销售额</span>
                        <div class="child">
                            <p><span>
                                    9999
                                </span>￥</p>
                            <span class="dashicons dashicons-insert"></span>
                        </div>

                    </div>
                </div>
                <div class="content">
                    <div class="black-data-box-mix">
                        <span>今日总订单</span>
                        <div class="child">
                            <p><span>
                                    9999
                                </span>个</p>
                            <span class="dashicons dashicons-database-add"></span>
                        </div>
                    </div>
                </div>
                <div class="content">
                    <div class="black-data-box-mix">
                        <span>今日总退款</span>
                        <div class="child">
                            <p><span>
                                    9999
                                </span>￥</p>
                            <span class="dashicons dashicons-remove"></span>
                        </div>
                    </div>
                </div>
                <div class="content">
                    <div class="black-data-box-mix">
                        <span>今日总退款订单</span>
                        <div class="child">
                            <p><span>
                                    9999
                                </span>个</p>
                            <span class="dashicons dashicons-database-remove"></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="describe">
                总销售（已减退款），总订单（已减退款）。
            </div>
        </section>





        <!--月度统计-->
        <section class="magick_section">
            <h2>月数据</h2>
            <hr>
            <div class="magick_shop_box">



                <div class="content">
                    <div class="black-data-box-mix">
                        <span>本月总销售额</span>
                        <div class="child">
                            <p><span>
                                    9999
                                </span>￥</p>
                            <span class="dashicons dashicons-insert"></span>
                        </div>

                    </div>
                </div>
                <div class="content">
                    <div class="black-data-box-mix">
                        <span>本月总订单</span>
                        <div class="child">
                            <p><span>
                                    9999
                                </span>个</p>
                            <span class="dashicons dashicons-database-add"></span>
                        </div>
                    </div>
                </div>
                <div class="content">
                    <div class="black-data-box-mix">
                        <span>本月总退款</span>
                        <div class="child">
                            <p><span>
                                    9999
                                </span>￥</p>
                            <span class="dashicons dashicons-remove"></span>
                        </div>
                    </div>
                </div>

                <div class="content">
                    <div class="black-data-box-mix">
                        <span>本月总退款订单</span>
                        <div class="child">
                            <p><span>
                                    9999
                                </span>个</p>
                            <span class="dashicons dashicons-database-remove"></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="describe">
                总销售（已减退款），总订单（已减退款）。
            </div>
        </section>

        <section class="magick_section">
            <h2>模块</h2>
            <hr>

            <div class="black-data-box-mix">
                <span>本月总销售额</span>
                <div class="child">
                    <p><span>9999</span>￥</p>
                    <span class="dashicons dashicons-insert"></span>
                </div>
            </div>


        </section>

        <section class="magick_section">
            <h2>flex百分比布局</h2>
            <hr>

           
                <div class="magick-per">
                    <div class="per-content">
                        <div class="black-data-box-mix">
                            <span>本月总销售额</span>
                            <div class="child">
                                <p><span>9999</span>￥</p>
                                <span class="dashicons dashicons-insert"></span>
                            </div>
                        </div>
                    </div>
                    <div class="per-content">
                        <div class="black-data-box-mix">
                            <span>本月总销售额</span>
                            <div class="child">
                                <p><span>9999</span>￥</p>
                                <span class="dashicons dashicons-insert"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="magick-per">
                    <div class="per-content">
                        <div class="black-data-box-mix">
                            <span>本月总销售额</span>
                            <div class="child">
                                <p><span>9999</span>￥</p>
                                <span class="dashicons dashicons-insert"></span>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="magick-per">
                    <div class="per-content">
                        3
                    </div>
               
            </div>


        </section>



    </div>

</body>

</html>